<template>
  <div class="address-list">
    <div class="address-nav">
      <van-nav-bar
        title="收货地址"
        left-arrow
        @click-left="$router.go(-1)"
      />
    </div>
    <div class="address-list-content">
        <van-address-list v-if="list.length > 0"
          v-model="chosenAddressId"
          :list="list"
          :disabled-list="disabledList"
          disabled-text="以下地址超出配送范围"
          default-tag-text="默认"
          @add="onAdd"
          @edit="onEdit"
        />
        <van-empty description="暂无收货地址" v-else>
          <van-button round type="danger" class="bottom-button" @click="onAdd">添加地址</van-button>
        </van-empty>
    </div>
  </div>
</template>

<script>
import { getAddressList, getDefaultAddressId } from '@/api/address'
export default {
  name: 'AddressList',
  data () {
    return {
      chosenAddressId: '1',
      list: [],
      disabledList: [
        {
          id: '3',
          name: '王五',
          tel: '1320000000',
          address: '浙江省杭州市滨江区江南大道 15 号'
        }
      ],
      defaultId: ''
    }
  },
  async created () {
    this.getAddressList()
    // this.getDefaultAddressId()
  },
  methods: {
    async getAddressList () {
      const res = await getDefaultAddressId()
      this.defaultId = res.data.defaultId
      // console.log(this.defaultId)
      const { data: { list } } = await getAddressList()
      // console.log(list)
      this.list = list.map(item => ({
        id: item.address_id,
        name: item.name,
        tel: item.phone,
        address: [item.region.province, item.region.city, item.region.region, item.detail].join(''),
        isDefault: this.defaultId === item.address_id
      }))
    },
    onAdd () {
      this.$router.push({ name: 'addressEdit' })
    },
    onEdit (item) {
      // console.log('编辑地址', item)
      this.$router.push({
        name: 'addressEdit',
        query: {
          addressId: item.id
        }
      })
    }
  }
}

</script>

<style lang="less" scoped>
  .address-list {
    display: flex;
    flex-direction: column;
    .address-nav{
      ::v-deep(.van-nav-bar__content){
        .van-nav-bar__title{
          font-weight: bold;
        }
      }
    }
  }
</style>
